<template>
  <div class="contact">
    <h1>联系我们</h1>
    <div class="contact-container">
      <div class="contact-info">
        <h2>联系信息</h2>
        <p>如果您有任何问题或建议，请随时与我们联系。</p>
        <ul>
          <li>📧 Email: contact@example.com</li>
          <li>📞 Phone: +86 123 4567 8900</li>
          <li>📍 Address: 中国上海市浦东新区</li>
        </ul>
        
        <div class="social-links">
          <h3>关注我们</h3>
          <div class="social-icons">
            <span>微博</span>
            <span>微信</span>
            <span>GitHub</span>
          </div>
        </div>
      </div>
      
      <div class="contact-form">
        <h2>发送消息</h2>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" v-model="form.name" required>
          </div>
          
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="form.email" required>
          </div>
          
          <div class="form-group">
            <label for="message">消息</label>
            <textarea id="message" v-model="form.message" rows="5" required></textarea>
          </div>
          
          <button type="submit" class="submit-button">发送消息</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Contact',
  setup() {
    const form = ref({
      name: '',
      email: '',
      message: ''
    })
    
    const submitForm = () => {
      alert(`感谢您的消息，${form.value.name}！我们将会尽快回复您。`)
      form.value = { name: '', email: '', message: '' }
    }
    
    return {
      form,
      submitForm
    }
  }
}
</script>

<style scoped>
.contact {
  max-width: 1200px;
  margin: 0 auto;
}

.contact h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-info h2,
.contact-form h2 {
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.contact-info ul {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.contact-info li:before {
  content: "▶";
  color: #42b983;
  position: absolute;
  left: 0;
}

.social-links {
  margin-top: 2rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-icons span {
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.social-icons span:hover {
  background-color: #e9ecef;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #42b983;
}

.submit-button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #359c6d;
}

@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
</style>